<template>
  <div class="h-[48px] flex justify-between items-center" @click="switchResult">
    <div class="w-[50px] text-center text-[14px] text-[#555]">{{ preDrawIssue }}</div>
    <div class="flex-1 w-0 flex justify-between items-center">
      <!-- 开奖号码 -->
      <div class="flex-1 w-0 flex justify-start items-center">
        <template v-for="(num, i) in extendedRes.zhengma">
          <div class="w-[32px] flex flex-col justify-center items-center">
            <lhcBall type="big" :num="Number(num)"></lhcBall>
            <div class="leading-none text-[10px] mt-[2px]">{{ extendedRes.zhengma_sx[i] }}</div>
          </div>
        </template>
        <div class="flex flex-col justify-center items-center">
          <div class="w-[24px] h-[24px] flex justify-center items-center">
            <svg-icon class="w-[9px] h-[9px]" name="plus"></svg-icon>
          </div>
          <div class="h-[10px]"></div>
        </div>
        <div class="w-[32px] flex flex-col justify-center items-center">
          <lhcBall :num="Number(extendedRes.tema)" type="big"></lhcBall>
          <div class="leading-none text-[10px] mt-[2px]">{{ extendedRes.tema_sx }}</div>
        </div>
      </div>
      <div class="flex justify-end mr-[14px]">
        <img class="w-[15px] h-[9px]" src="@/assets/images/down.png" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { lhcSumLH } from "@/utils/game";
import { useResult } from "../hooks/use-result";
const { lhcBall, lotteryCode, preDrawIssue, switchResult } = useResult();

const extendedRes = computed(() => lhcSumLH(lotteryCode.value));
</script>
